<template>
	<view style="width: 100vw; height: 100vh;background-color: #fff;">
		<newNavBar></newNavBar>

		<view>
			<uni-forms ref="baseForm" :modelValue="baseFormData" class="content" label-position="top">
				<uni-forms-item label="当前密码" labelWidth="60px" name="oldPassword">
					<uni-easyinput type="password" @input="userCodeChange" v-model="baseFormData.oldPassword"
						placeholder="请输入当前密码">
					</uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="新密码" labelWidth="60px" name="newPassword">
					<uni-easyinput type="password" @input="passwordChange" v-model="baseFormData.newPassword"
						placeholder="请输入新密码">
					</uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="确认新密码" labelWidth="80px" name="cNewPassword">
					<uni-easyinput type="password" @input="passwordChange" v-model="baseFormData.cNewPassword"
						placeholder="请输入新密码">
					</uni-easyinput>
				</uni-forms-item>
				<uni-forms-item>
					<button :style="{borderRadius: '40px', backgroundColor:mainColor,color: '#fff'}" type="primary"
						@click="submit">修改密码</button>
				</uni-forms-item>

			</uni-forms>
		</view>
	</view>
</template>

<script>
	import * as SystemJs from '../../common/system.js'
	import * as configJs from '../../common/config.js'
	export default {
		data() {
			return {
				mainColor: '',
				baseFormData: {
					oldPassword: '',
					newPassword: '',
					cNewPassword: ''
				},
				userInfo: {}
			}
		},
		onShow() {
			this.mainColor = configJs.baseColor.mainTitleColor;
		},
		onLoad() {
			SystemJs.systemJs.showTitleBar('修改密码', true)
			this.userInfo = configJs.getBaseInfo.getUserInfo();
		},
		methods: {
			submit() {
				if (SystemJs.systemJs.IsEmpty(this.baseFormData.oldPassword)) {
					SystemJs.httpUnit.uniToast("请输入当前密码");
					return;
				}
				if (SystemJs.systemJs.IsEmpty(this.baseFormData.newPassword)) {
					SystemJs.httpUnit.uniToast("请输入新密码");
					return;
				}
				if (SystemJs.systemJs.IsEmpty(this.baseFormData.cNewPassword)) {
					SystemJs.httpUnit.uniToast("请输入确认密码");
					return;
				}
				if (this.baseFormData.cNewPassword !== this.baseFormData.newPassword) {
					SystemJs.httpUnit.uniToast("两次输入的新密码不相同");
					return;
				}
				var obj = {};
				obj = this.baseFormData;
				obj.userCode = this.userInfo.userCode;
				SystemJs.httpUnit.requestCryptoPost({
					url: 'App/UpdateUserPassword',
					data: obj
				}).then((res) => {
					if (res.Result) {
						SystemJs.httpUnit.uniToast("密码修改成功")
						SystemJs.unitJs.clearObject(this.baseFormData);
					} else {
						SystemJs.httpUnit.uniToast(JSON.stringify(res.Message))
					}
				}).catch((err) => {
					SystemJs.httpUnit.uniToast(JSON.stringify(err))
				})
			}
		}
	}
</script>

<style scoped>
	.content {
		padding: 15px;
	}

	.uni-forms-item {
		margin-bottom: 0px;
	}

	/* 我们需要在 style 标签上加 scoped，同时使用 deep 穿透  才能修改覆盖了子组件的样式，否则无法在父组件中修改子组件样式*/
	/deep/ .uni-forms-item.is-direction-top .uni-forms-item__label {
		padding: 0px;
	}
</style>
